<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="title"
    @close="onClose"
    width="680px"
    :maskClosable="true"
  >
    <template #footer>
      <a-button @click="onClose">取消</a-button>
      <a-button type="primary" @click="onSave">保存</a-button>
    </template>
    <div class="card">
      <BasicForm @register="registerForm1" class="form">
        <template #image="{ field }" @mousemove.stop="state.accept = 'image/png, image/jpeg'">
          <Attachment
            :accept="accept"
            list-type="picture-card"
            :multiple="false"
            :maxCount="9"
            :disabled="false"
            v-model:data-source="form[field]"
          />
          <div class="f-hint">图片尺寸 800*800，不超过3M，支持PNG/JPG，最多上传9张</div>
        </template>
      </BasicForm>
    </div>
  </BasicDrawer>
</template>
<script>
  import { defineComponent, reactive, toRefs,onUnmounted } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  import { POST } from '@/api/http.js';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getAttachment, initImgAttachment } from '@/api/util.js';
  import Attachment from '@/widget/attachment.vue';
  export default defineComponent({
    components: { Attachment, BasicDrawer, BasicForm },
    emits: ['complete'],
    setup(_, { emit }) {
      const state = reactive({
        accept:'image/png, image/jpeg',
        title: '',
        behavior: 'add',
        memberCode: null,
        form: {},
      });
      onUnmounted(()=>{
        console.log(state)
      })
      const { createMessage } = useMessage();

      const [registerForm1, form1] = useForm({
        labelWidth: 100,
        baseColProps: { span: 24, style: { paddingRight: '36px' } },
        schemas: [
          {
            label: '服务记录',
            field: 'content',
            required: true,
            component: 'InputTextArea',
            componentProps: {
              rows: 6,
              maxlength: 200,
              showCount: true,
            },
          },

          {
            label: '服务照片',
            field: 'noteImgList',
            required: false,
            component: 'upload',
            slot: 'image',
          },
        ],
        showActionButtonGroup: false,
      });

      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
        async ({ memberCode }) => {
          Object.assign(state, { title: '新增服务日志', memberCode });
          await init();
        },
      );
      function onClose (){
        state.form = {}
        closeDrawer()
      }
      async function init() {
        await form1.resetFields();

        //附件
        Object.assign(state.form, initImgAttachment({}, ['noteImgList']));
      }

      async function onSave() {
        await form1.validate();
        const formData = form1.getFieldsValue();

        try {
          setDrawerProps({ confirmLoading: true });

          //附件
          const { noteImgList } = state.form;
          formData.noteImgList = getAttachment(noteImgList)?.map((o) => o.url) ?? null;

          const { memberCode } = state;
          formData.memberCode = memberCode;

          await POST('/membership/addMemberNotesBean', formData);

          createMessage.success('服务日志已保存');
          emit('complete');
          closeDrawer();
          await form1.resetFields();
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      return {
        ...toRefs(state),
        registerDrawer,
        registerForm1,
        closeDrawer,
        onSave,
        onClose,
      };
    },
  });
</script>

<style lang="less" scoped>
  .card {
    margin: 8px;
    padding: 0 12px;

    .form {
      padding: 24px 12px 0 0;
    }

    .tag {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      cursor: pointer;
      gap: 8px 12px;

      .cell {
        position: relative;
        overflow: clip;

        padding: 4px 20px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 400;
      }

      .tacit {
        border: 1px solid #ced2d9;
        color: #666666;
      }

      .active {
        background: #fff1f4;
        border-radius: 2px;
        border: 1px solid #ffdfe7;
        color: #eb6485;
      }
    }

    .add {
      margin: 12px 64px 12px 0;
      background: #f5f7fa;
      border-radius: 6px;
      padding: 12px 18px;
    }
  }
</style>
